<template>
	<div id="header" :style="{'height': padding ? '100px' : '0'}">
		<div id="header-background"></div>
		<el-button id="float-menu-button" class="float" :icon="isBack ? 'el-icon-back' : 'el-icon-menu'" slot="reference" @click="goToMenu" circle>
			<span id="float-menu-title" class="text float">
				{{ getTitle() }}
			</span>
		</el-button>
	</div>
</template>

<style>
#float-menu-button {
	left: 30px;
	top: 30px;
	font-size: 20px;
}
#float-menu-button span {
	margin: 0;
}
#float-menu-title {
	left: 55px;
	margin: 0;
}
.el-menu-vertical {
	border: none;
}
</style>

<script>
import { push } from '~/router'
import menu from '~/data/menu.json'

export default {
	props: {
		route: {
			type: String,
			required: true
		},
		padding: {
			type: Boolean,
			default: false
		},
		isBack: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			menu: [
				["首页", "el-icon-s-home", "/"],
			].concat(menu)
		};
	},
	methods: {
		getTitle() {
			return menu.find((item) => {
				return item[2] == this.route
			})[0]
		},
		goToMenu() {
			if (! this.isBack)
				push(this, '/menuTree')
			else
				this.$router.go(-1)
		}
	}
}
</script>